<template>
    <div class="wishlist">
        心愿清单
        <ul>
            <li v-for="d in list" :key="d" @click="add(d)">{{d}}</li>
        </ul>
        <button @click="isShow=true">❤心愿清单❤({{wishlist.length}})</button>
        <div class="modal" v-show="isShow">
            <ul>
                <li  v-for="d in wishlist" :key="d.name" @click="d.done=!d.done">{{d.name}}{{d.done?' √':' x'}}</li>
            </ul>   
            <button @click="isShow=false">关闭</button>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                list:['买跑车','找个好工作','不加班','不内卷'],
                wishlist:[],
                isShow:false
            }
        },      
        methods:{
            add(val){
                if(this.wishlist.some(item=>item.name=== val)) return;
                this.wishlist.push({
                    name:val,
                    done:false
                })
            }
        }
    }
</script>

<style lang="sass" scoped>

</style>